<template>
	<view class="load" v-if="!load">
		<u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
	</view>
	<view v-else>
		<view class="tap">
			<view class="tabs wap">
				<view class="tabs_item " :class="{'tabs_item_curr':tabInd == 0}" @click="setTab(1)">
					消费情况
				</view>
				<view class="tabs_item" :class="{'tabs_item_curr':tabInd == 1}" @click="setTab(2)">
					月度汇总
				</view>
		
			</view>
		</view>
		<block v-if="tab==1">
			<x-scroll :fixed="true" @onRefresh="onRefresh" @scrolltolower="scrolltolower" :refresh="_freshing">
				<view class="list ">
					<view class="item wap">
						<view class="con">
							<view class="txt">日期</view>
							<view class="txt">会员</view>
							<view class="txt">礼物</view>
							<view class="txt">微信</view>
							<view class="txt">组局</view>
							<view class="txt_summary">合计</view>
						</view>
					</view>
					<view class="item wap" v-for="item in list" :key="item.ID">
						<view class="con">
							<view class="txt">{{item.CreateTime}}</view>
							<view class="txt_line" @click="nav_to(`/pages/manage/consumption_user?d=${item.CreateTime}&pt=会员升级`)">{{item.MemberFee}}</view>
							<view class="txt_line" @click="nav_to(`/pages/manage/consumption_user?d=${item.CreateTime}&pt=赠送礼物`)">{{item.GiftFee}} </view>
							<view class="txt_line" @click="nav_to(`/pages/manage/consumption_user?d=${item.CreateTime}&pt=申请微信`)">{{item.WXFee}} </view>
							<view class="txt_line" @click="nav_to(`/pages/manage/consumption_user?d=${item.CreateTime}&pt=球局奖励`)">{{item.ChargeFee}} </view>
							<view class="txt_summary">{{item.MemberFee+item.GiftFee+item.WXFee+item.ChargeFee}}</view>
						</view>
					</view>
				</view>
			
			</x-scroll>
		</block>
		<block v-if="tab==2">
			<x-scroll :fixed="true" @onRefresh="onRefresh" @scrolltolower="scrolltolower" :refresh="_freshing">
				<view class="list ">
					<view class="item wap">
						<view class="con">
							<view class="txt">日期</view>
							<view class="txt">小程序</view>
							<view class="txt">APP</view>
							<view class="txt">总额</view>
						</view>
					</view>
					<view class="item wap" v-for="item in list" :key="item.ID">
						<view class="con">
							<view class="txt">{{item.CreateTime}}</view>
							<view class="txt">{{item.XCX_Pay}}</view>
							<view class="txt">{{item.APP_Pay}}</view>
							<view class="txt_line" @click="nav_to(`/pages/manage/consumption_item?d=${item.CreateTime}`)">{{item.TotalFee}}</view>
							
						</view>
					</view>
				</view>
			
			</x-scroll>
		</block>
		
	</view>

</template>

<script>
	export default {
		data() {
			return {
				load: false,
				_freshing: true,
				list: [],
				searchValue: '',
				PageIndex: 1, //页码
				PageSize: 30, //请求条数
				isMore: true,
				
				tab:1
			}
		},
		onLoad(args) {
			this.init();
		},
		onShow() {

		},
		methods: {
			clearRepetition(arr, key = "ID") {
				let newArr = [];
				arr.forEach(item => {
					let index;
					let check = newArr.every((newItem, i) => {
						if (item[key] !== newItem[key]) {
							index = -1;
							return true;
						} else {
							index = i;

							return false;
						}
					})
					if (check) {
						newArr.push(item);
					} else {
						newArr.splice(index, 1, item);
					}

				})
				console.log('newArr', newArr)
				return newArr;
			},
			onRefresh() {
				this.PageIndex = 1;
				this.init();
			},
			//滚动到底部触发
			async scrolltolower() {
				if (this.isMore) {
					this.PageIndex++;
					this.init();
				}
			},

			async init() {
				let res = await this.$api.post('/Manage/Consumption', {
					PageIndex: this.PageIndex,
					PageSize: this.PageSize,
					Month:'202402'
				});

				

				let list1 = this.list.concat(res.data)


				this.list = this.clearRepetition(list1, "ID");


				this.isMore = Array.isArray(res.data) && res.data.length >= this.PageSize;

				this.load = true;

			},


		},
		computed: {


		}
	}
</script>

<style lang="scss">
	.list {
		.item {
			display: flex;
			height: 80rpx;
			align-items: center;

			.con {
				padding-left: 20rpx;
				flex-flow: row nowrap;
				display: flex;
				justify-content: space-between;
				width:100%;
				.txt {
					margin-top: 10rpx;
					width: 33%;
					text-align: center;
				}
				
				.txt_line {
					margin-top: 10rpx;
					width: 33%;
					text-align: center;
					text-decoration: underline;
				}
				
				.txt_summary{
					margin-top: 10rpx;
					width: 33%;
					text-align: center;
					color:#ff0;
				}
			}


		}


	}
</style>